﻿@page "/modals"

<h3>Modal 模态框</h3>

<h4>在保留当前页面状态的情况下，告知用户并承载相关操作</h4>

<Block Title="基本用法" Introduction="弹出一个对话框，适合需要定制性更大的场景">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">弹窗标题</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>弹窗正文</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
            <div class="form-group col-12">
                <Button OnClick="@(async e => await Modal.Toggle())">弹窗</Button>
                <Modal @ref="Modal">
                    <ModalDialog Title="默认弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="IsBackdrop 背景关闭模式" Introduction="点击弹窗以外区域默认关闭弹窗效果">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Button OnClick="@(async e => await BackdropModal.Toggle())">弹窗</Button>
                <Modal @ref="BackdropModal" IsBackdrop="true">
                    <ModalDialog Title="点击背景可关闭弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="弹框大小" Introduction="通过 <code>Size</code> 设置弹框组件的大小">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button OnClick="@(async e => await SmailModal.Toggle())">小弹窗</Button>
                <Modal @ref="SmailModal">
                    <ModalDialog Size="Size.Small" Title="小弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button OnClick="@(async e => await LargeModal.Toggle())">大弹窗</Button>
                <Modal @ref="LargeModal">
                    <ModalDialog Size="Size.Large" Title="大弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button OnClick="@(async e => await ExtraLargeModal.Toggle())">超大弹窗</Button>
                <Modal @ref="ExtraLargeModal">
                    <ModalDialog Size="Size.ExtraLarge" Title="超大弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="垂直居中" Introduction="通过 <code>IsCentered</code> 设置弹框组件的垂直居中">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button OnClick="@(async e => await CenterModal.Toggle())">垂直居中的弹窗</Button>
                <Modal @ref="CenterModal">
                    <ModalDialog IsCentered="true" Title="垂直居中的弹窗">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="超长内容" Introduction="通过 <code>IsScrolling</code> 针对超出内容设置弹框组件滚轮滑动功能">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button OnClick="@(async e => await LongContentModal.Toggle())">内容超长的弹窗</Button>
                <Modal @ref="LongContentModal">
                    <ModalDialog IsCentered="true" Title="内容超长的弹窗">
                        <BodyTemplate>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
            <div class="form-group col-12 col-sm-4 col-lg-auto">
                <Button OnClick="@(async e => await ScrollModal.Toggle())">内置滚动条弹窗</Button>
                <Modal @ref="ScrollModal">
                    <ModalDialog IsCentered="true" IsScrolling="true" Title="内置滚动条弹窗">
                        <BodyTemplate>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<Block Title="可拖拽弹窗" Introduction="点击弹窗标题栏对弹窗进行拖拽">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Button OnClick="@(async e => await Modal.Toggle())">弹窗</Button>
                <Modal @ref="Modal">
                    <ModalDialog Title="默认弹窗" IsDraggable="true">
                        <BodyTemplate>
                            <div>我是弹窗内正文</div>
                        </BodyTemplate>
                    </ModalDialog>
                </Modal>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
